<template>
  <div>
    <h3>行业管理</h3>
    <a-form
      :form="form"
      layout="inline"
      @submit.prevent="onSubmit"
      :style="{ marginBottom: '20px' }"
      id="service-menu-search"
    >
      <div class="service-menu-query">
        <a-form-item>
          <a-input
            placeholder="请输入行业编号、行业名称"
            v-decorator="['name']"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit"> 筛选 </a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="handleSort(-1)" style="width: 50px" type="primary">
            <a-icon type="arrow-up" />
          </a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="handleSort(1)" style="width: 50px" type="primary">
            <a-icon type="arrow-down" />
          </a-button>
        </a-form-item>
        <!-- <a-form-item>
                    <a-button type="primary">
                        上传图片
                    </a-button>
                </a-form-item>
                <a-form-item>
                    <a-button type="primary">
                        上传视频
                    </a-button>
                </a-form-item> -->

        <a-form-item :style="{ flexGrow: 1 }">
          <!-- <router-link :to="`/industry/create/${sort}`">
            <a-button type="primary" icon="plus">添加</a-button>
          </router-link> -->
          <a-button type="primary" icon="plus" @click="iscreate = true">添加</a-button>
        </a-form-item>
      </div>
    </a-form>
    <a-table
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
        type: 'radio',
      }"
      :columns="columns"
      :dataSource="data"
      rowKey="id"
      :pagination="pagination"
      bordered
    >
      <template slot="indexRender" slot-scope="text, record, index">
        {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
      </template>
      <template slot="propagate" slot-scope="text, record">
        <div>宣传语1：{{ record.propagate1 || "暂未添加" }}</div>
        <div>宣传语2：{{ record.propagate2 || "暂未添加" }}</div>
      </template>
      <template slot="inspection" slot-scope="text, record">
        <template v-if="record.inspection && record.inspection.length">
          <div
            v-for="inspect in record.inspection"
            style="color: #1890ff"
            :key="inspect.id"
          >
            {{ inspect.name }}
          </div>
        </template>
        <template v-else> 暂未添加 </template>
      </template>
      <template slot="image" slot-scope="text, record">
        <a-avatar shape="square" alt="图片" :src="record.image" />
      </template>
      <template slot="video" slot-scope="text, record">
        <template v-if="record && record.video">
          <a-icon
            @click.stop.prevent="handlePlayVideo(record)"
            :style="{ fontSize: '20px', color: '#08c', cursor: 'pointer' }"
            type="video-camera"
          />
        </template>
        <span v-else>暂未添加</span>
      </template>
      <template slot="action" slot-scope="text, record">
        <router-link :to="'/industry/update/' + record.id">
          <img src="./../../assets/images/view.svg" alt="" />
        </router-link>
        <img
          @click.stop.prevent="showdel(record)"
          src="./../../assets/images/delete.svg"
          alt=""
        />
      </template>
    </a-table>

    <a-modal centered v-model="videoVisible" title="播放视频">
      <video
        width="470"
        height="300"
        :src="selectRecord.video"
        controls="controls"
      >
        您的浏览器不支持 video 标签。
      </video>
      <div slot="footer">
        <a-button
          @click.stop.prevent="videoVisible = false"
          style="display: inline-block; margin: 0 auto"
          type="primary"
          >关闭</a-button
        >
      </div>
    </a-modal>
    <!-- 删除行业 -->
    <div class="moadel-wrap">
      <a-modal title="删除" :visible="isdel" @cancel="handleCancel">
        <template slot="footer">
          <a-button type="warning" @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="handleDelete">确定</a-button>
        </template>
        <p>是否删除行业-{{ deldata.number }}?</p>
      </a-modal>
    </div>
    <!-- 删除行业 end -->

    <!-- 新建行业 -->
   <div class="create-wrap" v-if="iscreate">
      <a-modal title="新增行业" :visible="true" @cancel="handleCancel">
     
      <create ref='oncreate' @close="handleCancel" v-if="iscreate"></create>
    <template slot="footer">
     <div class="footer-wrap">
         <a-button type="warning" @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="onsubmit">提交</a-button>
     </div>
    </template>
    </a-modal>
   </div>
    <!-- 新建行业 -->
  </div>
</template>

<script>
import create from './create'
export default {
  components:{
    create
    
  },
  watch:{
   
  },
  data() {
    
    return {
      
      iscreate:false,//控制新建行业框显示
      deldata: {}, //用于存放删除的数据
      isdel: false, //控制删除行业框显示
      form: this.$form.createForm(this),
      search: {},

      data: [],
      columns: [
        {
          title: "序号",
          scopedSlots: { customRender: "indexRender" },
          align: "center",
        },
        { title: "行业编号", dataIndex: "number", align: "center" },
        { title: "行业名称", dataIndex: "name", align: "center" },
        {
          title: "宣传语",
          scopedSlots: { customRender: "propagate" },
          align: "left",
        },
        {
          title: "对应巡检",
          scopedSlots: { customRender: "inspection" },
          align: "left",
        },
        {
          title: "图片",
          scopedSlots: { customRender: "image" },
          align: "center",
        },
        {
          title: "视频",
          scopedSlots: { customRender: "video" },
          align: "center",
        },
        {
          title: "操作",
          scopedSlots: { customRender: "action" },
          align: "center",
        },
      ],
      pagination: {
        current: 1,
        total: 0,
        pageSize: 10,
        showQuickJumper: true,
        onChange: (page, size) => {
          this.handleChange(page, size);
        },
      },

      videoVisible: false,
      selectRecord: {},

      selectedRowKeys: [],
      sort: 0,
    };
  },
  methods: {
    onsubmit(){
      this.$refs.oncreate.onSubmit()
    },
    //关闭删除框
    handleCancel() {
      this.isdel = false;
      this.iscreate =false
    },
    handleChange(page, size) {
      this.pagination.current = page * 1;
      this.pagination.pageSize = size * 1;
      this.getList();
    },
    async getList(param = {}) {
      let req = {
        pageSize: this.pagination.pageSize * 1,
        pageNo: this.pagination.current * 1,
      };

      let {
        data: { data, totalCount },
      } = await this.http(
        "get",
        "/industry/selectLikeList",
        Object.assign(req, param)
      );
      this.data = data || [];
      this.pagination.total = totalCount;

      if (this.data && this.data.length) {
        this.data.sort((a, b) => Number(b.sort) - Number(a.sort));
      }

      this.sort = this.data[0].sort + 1;
    },
    onSubmit() {
      //搜索提交
      this.form.validateFields((err, values) => {
        if (!err) {
          this.pagination.current = 1;
          this.search = values;
          this.getList(values);
        }
      });
    },
    handlePlayVideo(record) {
      this.videoVisible = true;
      this.selectRecord = record;
    },
    //打开删除框
    showdel(record) {
      this.deldata = record;
      this.isdel = true;
    },
    handleDelete() {
      this.http("delete", `industry/delete/${this.deldata.id}`)
        .then((res) => {
          if (res && res.status === 1) {
            this.$message.success("删除成功!", 1);
            if (this.data.length === 1) {
              this.pagination.current = 1;
            }
            this.getList(this.search);
          } else {
            this.$message.error("删除失败!", 1);
          }
        })
        .catch((e) => {
          this.$message.error("服务器错误!", 1);
        });
      this.isdel = false;
      // this.$confirm({
      //     title: '系统提示',
      //     content: '确定要删除吗？',
      //     onOk: () => {
      //         this.http("delete", `industry/delete/${record.id}`).then(res => {
      //             if (res && res.status === 1) {
      //                 this.$message.success("删除成功!", 1);
      //                 if(this.data.length === 1){
      //                     this.pagination.current = 1
      //                 }
      //                 this.getList(this.search);
      //             } else {
      //                 this.$message.error("删除失败!", 1);
      //             }
      //         }).catch(e => {
      //             this.$message.error("服务器错误!", 1);
      //         })
      //     },
      //     onCancel() {
      //     },
      // });
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    selectCheck() {
      let { selectedRowKeys } = this;
      if (this.selectedRowKeys.length <= 0) {
        this.$message.error("请先选择要操作的行业");
        return false;
      }
      return true;
    },
    async handleSort(type) {
      if (this.selectCheck()) {
        let { selectedRowKeys } = this,
          selectId = selectedRowKeys[0];
        let findIndex = this.data.findIndex(
          (item) => Number(item.id) === Number(selectId)
        );
        // console.log(this.data)
        if (findIndex !== -1) {
          let changeIndex = findIndex + type;
          if (changeIndex >= 0 && changeIndex <= this.data.length - 1) {
            await this.http("put", `industry/update`, {
              ...this.data[findIndex],
              sort: this.data[changeIndex].sort,
            });
            // console.log(selectId, this.data[changeIndex].sort)
            await this.http("put", `industry/update`, {
              ...this.data[changeIndex],
              sort: this.data[findIndex].sort,
            });
            // console.log(this.data[changeIndex].id, this.data[findIndex].sort)

            // this.data[findIndex] = this.data.splice(changeIndex, 1, this.data[findIndex])[0]
            await this.getList();
            this.$message.success("排序成功", 1);
          }
        }
      }
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../assets/scss/mixin";
#service-menu-search {
  .ant-input {
    width: 250px;
  }
}

.service-menu-query {
  @include fj(flex-start);
  .ant-form-item + .ant-form-item {
    margin-left: 10px;
  }
}
</style>
